<template>
  <view>
    <!-- 1.0 搜索框 -->
    <ugo-search></ugo-search>
    <!-- 1.0 搜索框 -->

    <!-- 2.0 tab栏 -->
    <u-tabs
      :current="current"
      :list="tabs"
      :scrollable="false"
      @click="click"
    ></u-tabs>
    <!-- 2.0 tab栏 -->

    <!-- 3.0 内容 -->
    <view>
      <view v-if="current === 0">
        <navigator
          :url="'/pages/goods_detail/goods_detail?id=' + item.goods_id"
          class="goods-item"
          v-for="item in goods"
          :key="item.goods_id"
        >
          <view class="goods-item-img">
            <image :src="item.goods_small_logo"></image>
          </view>
          <view class="goods-item-info">
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <view class="goods-price">￥{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
      <view v-else-if="current === 1">销量</view>
      <view v-else-if="current === 2">价格</view>
    </view>
    <!-- 3.0 内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
      current: 0,

      // 商品列表
      goods: [],

      // 接口要用到的4个参数
      params: {
        // 否	string	关键字
        query: "",
        // 否	string	分类id
        cid: "",
        // 否	number	页码
        pagenum: 1,
        // 否	number	页容量
        pagesize: 10,
      },

      // 总条数
      total: 0,
    };
  },
  async onLoad({ cid }) {
    // console.log(cid);
    this.params.cid = cid || 5;

    this.getGoods();
  },
  methods: {
    // tabs组件的点击切换
    click({ index }) {
      console.log(index);
      this.current = index;
    },

    // 封装请求数据
    async getGoods() {
      // params uView组件库规定,带参数发请求 就是以这样 params键接收 我们要传过去的值
      let res = await uni.$u.http.get("/goods/search", {
        params: this.params,
      });
      console.log(res);
      this.goods = [...this.goods, ...res.message.goods];

      this.total = res.message.total;
    },
  },
  // 下拉刷新
  async onPullDownRefresh() {
    // 重置页码
    this.params.pagenum = 1;
    // 清空数据
    this.goods = [];
    // 请求数据
    await this.getGoods(); // 等待它数据回来 我们再去关闭 下拉刷新组件

    // 主动关闭下拉刷新 ！！
    uni.stopPullDownRefresh();
  },
  // 滑倒底 而触发的函数
  onReachBottom() {
    console.log(123);

    // 判断一下, 当我的 商品列表数据 大于等于 我的总条数  , 那就是没有更多的数据了, 提示用户 ,并结束函数
    if (this.goods.length >= this.total) {
      // 没有数据了
      uni.showToast({
        title: "没有更多数据了",
        icon: "none",
      });
      return;
    }

    // 每次滑到底的时候,让我们的 页码 进行 ++
    this.params.pagenum++;
    // 并请求数据
    this.getGoods();
  },
};
</script>

<style lang="scss">
.u-tabs__wrapper__nav__line {
  background-color: red !important;
}
.goods-item {
  display: flex;
  margin-top: 10rpx;
  .goods-item-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 192rpx;
      height: 191rpx;
      background-color: #ccc;
    }
  }

  .goods-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 28rpx;
    color: #666;
    flex: 2;
    .goods-name {
    }

    .goods-price {
      color: #eb4450;
    }
  }
}
</style>